<template>
  <div>
    <div class="main-bg-head">
      <img src="../../assets/xmas/index-bg.jpg" class="main-bg-image"/>
    </div>
    <div class="content">
      <div class="content-bg">
        <img src="../../assets/xmas/index-snow.png" class="index-snow"/>
        <div v-for="(item, index) in clubs" style="position:relative;">
          <router-link :to="{path: `/xmasClubdetail/${item.id}`}">
            <div class="content-wrap">
              <div class="img-wrap">
                <div :style="{backgroundImage: `url(${item.cover})`}" class="img-bg"></div>
              </div>
              <div class="content-info-wrap">
                <p class="info-name overflow-line">{{item.name}}</p>
                <p class="info-gray overflow-line">地址：{{item.location}}</p>
                <p class="info-gray">距离：{{item.distance}}km</p>
              </div>
            </div>
          </router-link>
          <div class="receive-btn-sm" @click.stop="toFill(`http://sci.50yoga.cn/other/spactivity/index/id/1009/ext1/${item.id}`)">领取</div>
        </div>
      </div>
      <img src="../../assets/xmas/bottom-snow.png" class="content-bottom"/>
      <baidu-map id="allmap" class="bm-view" ak='vllt18FUjkwK7nM50Z7T33Oe' @ready="handler" :autoLocation="true"></baidu-map>
    </div>
    <div class="loading-pop" v-show="isLoad">
      <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>   
  </div>
</template>

<script>
import { BaiduMap } from 'vue-baidu-map'
export default {
  name: 'index',
  data () {
    return {
      clubs: [],
      isLoad: false
    }
  },
  components: {
    BaiduMap
  },
  methods: {
    handler ({ BMap, map }) {
      try {
        // this.isLoad = true
        this.$http
          .get(`${process.env.API}/common/clubs?lat=0&lon=0&brand_id=50`, {
            headers: { Accept: 'application/vnd.sci.v2+json' }
          })
          .then(response => {
            response = response.body
            this.clubs = response.data
            this.isLoad = false
          })
          .catch(console.log)
        var geolocation = new BMap.Geolocation()
        if (geolocation.getCurrentPosition) {
          // this.isLoad = true
          let that = this
          geolocation.getCurrentPosition(
            function (r) {
              if (this.getStatus() === 0) {
                that.$http
                  .get(
                    `${process.env.API}/common/clubs?lat=${r.point.lat}&lon=${r.point.lng}&brand_id=50`,
                    { headers: { Accept: 'application/vnd.sci.v2+json' } }
                  )
                  .then(response => {
                    response = response.body
                    that.clubs = response.data
                    that.isLoad = false
                  })
                  .catch(console.log)
              } else {
              }
            },
            { enableHighAccuracy: true }
          )
        } else {
        }
      } catch (error) {
      }
    },
    toFill (url) {
      window.location.href = url
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.main-bg-head {
  position: relative;
  font-size: 0;
}

.main-bg-image {
  width: 100%;
  height: auto;
}

.content {
  position: relative;
  background: #dd3342;

  .content-bg {
    position: relative;
    padding-top: 15px;
    padding-bottom: 40px;

    .index-snow {
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 100;
      margin-top: -0.6rem;
    }

    .receive-btn-sm {
      position: absolute;
      width: 75px;
      height: h = 25px;
      line-height: h;
      text-align: center;
      right: 4.5%;
      bottom: 0;
      background: #339145;
      color: #fff;
      font-size: 0.875rem;
      border-radius: 10px 0 5px 0;
    }

    .content-wrap {
      position: relative;
      background: #fefbef;
      width: 91%;
      height: 120px;
      margin: 0 auto;
      margin-bottom: 10px;
      box-sizing: content-box;
      border-radius: 5px;
      display: flex;
      flex-flow: row;

      .img-wrap {
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 5px 0 0 5px;
        overflow: hidden;

        .img-bg {
          width: 100%;
          height: 100%;
          background-size: cover;
        }
      }

      .content-info-wrap {
        flex: 1;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .info-name {
          width: 100%;
          color: #333333;
          font-size: 0.875rem;
          line-height: 1.5;
        }

        .info-gray {
          width: 100%;
          color: #909090;
          font-size: 0.75rem;
          line-height: 1.5;
        }
      }
    }
  }

  .content-bottom {
    width: 100%;
    font-size: 0;
    margin-top: -13rem;
    vertical-align:bottom;
  }
}
</style>
